<template>
  <n-space vertical>
   <n-form
     ref="formRef"
     :model="model"
     label-placement="left"
     :label-width="160"
     class="setting-cont"
   >
     <n-form-item label="分配账号" >
       <n-input v-model:value="model.username"  placeholder="请输入账号" />
     </n-form-item>
     
     <n-form-item label="默认密码" >
       <n-input v-model:value="model.password"  type="password"  placeholder="请输入密码" />
     </n-form-item>
     <n-form-item label="关联角色" >
       <n-select
         v-model:value="model.roleId"
         placeholder="请选择角色"
         :options="roleList"
         label-field="roleName"
         value-field="_id"
       />
     </n-form-item>
     
     <n-form-item label=" " >
       <n-button type="primary" size="medium" block @click="handleRegister">
         确认注册
       </n-button>
     </n-form-item>
     
   </n-form>
 </n-space>
</template>

<script setup>
import { ref } from 'vue';
import { roleGetApi, userRegisterApi } from '../../api/user';

const roleList = ref([]);
roleGetApi().then(res=>{
  roleList.value = res.data.data
})

const model = ref({
 username:'',
 password:'',
 roleId:'',
})
const formRef = ref()
const handleRegister = async ()=>{
  await userRegisterApi(model.value)
}

</script>

<style lang="scss" scoped>
.setting-cont{
 padding-right: 140px;
}
</style>